<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../x-spreadsheet/xspreadsheet.css" rel="stylesheet">
</head>
</head>
<body>
<input type="file" onchange="impt(this)"/>
<input type="button" value="下载" onclick="down()"/>
<input type="button" value="查看结果数据数据" onclick="showData()"/>
<div id="x-spreadsheet-demo"></div>
<script type="text/javascript" src="../x-spreadsheet/xspreadsheet.js"></script>
<script type="text/javascript" src="../x-spreadsheet/locale/zh-cn.js"></script>
<script src="./xlsx.full.min.js"></script>
<script type="application/javascript">
    x_spreadsheet.locale("zh-cn");
    const xs = new x_spreadsheet("#x-spreadsheet-demo", {showToolbar: true, showGrid: true});
    xs.loadData(
        [
            {
                // freeze: 'A2',//冻结行
                name: "sheet001",
                styles: [
                    {
                        bgcolor: '#f4f5f8',
                        textwrap: true,
                        color: '#900b09',
                        border: {
                            top: ['thin', '#0366d6'],
                            bottom: ['thin', '#0366d6'],
                            right: ['thin', '#0366d6'],
                            left: ['thin', '#0366d6'],
                        },
                    },
                    {
                        bgcolor: '#000',//背景色
                        textwrap: true,//自动换行
                        color: '#fff',//字色
                        border: {
                            top: ['thin', '#0366d6'],//上边框
                            bottom: ['thin', '#0366d6'],//下边框
                            right: ['thin', '#0366d6'],//右边框
                            left: ['thin', '#0366d6'],//左边框
                        },
                        font: {
                            size: 12,//字号
                            name: "Helvetica",//字体
                            bold: true,//加粗
                            italic: true,//斜体字
                        },
                        strike:true,//删除线
                        underline: true,//下划线
                        align: "center",//center,left,right,水平方向位置
                        valign: "middle",//"top","middle","bottom",竖直方向位置
                        format: "normal",//"normal"正常（默认），"text"文本，"number"数值，"percent"百分比，"rmb"人民币，"usd"美元，"eur"欧元，"date"短时间，"time"时间，"datetime"长时间，"duration"持续时间
                    },
                ],
                merges: [//实际表格合并
                    'A1:B1',
                    'A3:B4',
                ],
                cols: {
                    len: 5,//列数
                    2: {
                        width: 200,//列宽
                    },
                },
                rows: {
                    len: 10,//行数
                    0: {
                        height: 100,//行高
                        cells: {
                            0: {
                                text: '第一个sheet页',
                                merge: [0,1],
                                style: 1,
                            },
                        }
                    },
                    2: {
                        cells: {
                            0: {
                                text: '第一个sheet页',
                                merge: [1,0]
                            },
                        }
                    }
                },
                validations: [],
                autofilter: {},
            },
            {
                name: "sheet002",
                rows: {
                    0: {
                        cells: {
                            0: {
                                text: '第二个sheet页'
                            }
                        }
                    }
                }
            },
        ]
    );
    function showData() {
        console.log(xs.getData());
    }
    xs.change((cdata) => {
        console.log('>>>', xs.getData());
    });

    function impt(emt) {
        var files = emt.files;
        var fileReader = new FileReader();
        fileReader.onload = function (ev) {
            var data = ev.target.result;
            var workbook = XLSX.read(data, {type: 'binary'});
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    var data_str = XLSX.utils.sheet_to_csv(workbook.Sheets[sheet], {FS: "，"});
                    var arr1 = data_str.split('\n');
                    var rows = {};
                    for (var i = 0; i < arr1.length - 1; i++) {
                        var arr2 = arr1[i].split('，');
                        var t = {};
                        for (var j = 0; j < arr2.length; j++) {
                            var ele = arr2[j].replace(/\"/g, "");
                            var te = {};
                            te.text = ele;
                            if (ele !== "") {
                                t[j] = te
                            }
                        }
                        var l = {};
                        l.cells = t;
                        rows[i] = l;
                    }
                    xs.loadData({
                        rows
                    });
                    break;//只取第一个sheet
                    // console.log(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
                    // console.log(XLSX.utils.sheet_to_csv(workbook.Sheets[sheet]))
                    // console.log(XLSX.utils.sheet_to_formulae(workbook.Sheets[sheet]))
                }
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    }

    function xtos(sdata) {
        var out = XLSX.utils.book_new();
        sdata.forEach(function (xws) {
            var aoa = [[]];
            var rowobj = xws.rows;
            for (var ri = 0; ri < rowobj.len; ++ri) {
                var row = rowobj[ri];
                if (!row) continue;
                aoa[ri] = [];
                Object.keys(row.cells).forEach(function (k) {
                    var idx = +k;
                    if (isNaN(idx)) return;
                    aoa[ri][idx] = row.cells[k].text;
                });
            }
            var ws = XLSX.utils.aoa_to_sheet(aoa);
            XLSX.utils.book_append_sheet(out, ws, xws.name);
        });
        return out;
    }

    function down() {
        /* build workbook from the grid data */
        var new_wb = xtos(xs.getData());
        /* generate download */
        XLSX.writeFile(new_wb, "SheetJS.xlsx");
    }
</script>
</body>
</html>